@import "compass/css3"
.wordgame-container
  #board
    margin: 0px auto
    table
      margin: 0px auto
      tr
        border: none
        &.even, &.odd
          background-color: #FFF
      td
        vertical-align: middle
        border: none
        background-color: none
        margin: 0px
        padding: 1px
        .letter-cell
          color: #333
          font-weight: bold
          text-align: center
          text-transform: uppercase
          text-align: center
          vertical-align: middle
          width: 26px
          height: 26px
          line-height: 26px
          border-radius: 5px
          text-align: center
          display: block
          &.hover
            +box-shadow(0 0 5px red)
            color: red
          &.letter-visible
            background: none repeat scroll 0 0 #FFE57E
            border: 1px solid #E2B709
          &.letter-guest
            border: 1px solid #ccc429
            background-color: #fff4f4
            color: #ff0000
            cursor: pointer
#wordgame-letters
  background-color: #fff
  border: 1px solid #c3c3c3
  border-radius: 5px
  position: relative
  width: 245px
  height: 200px
  display: none
  .letter-title
    padding: 2px 5px
    margin-bottom: 10px
    text-align: center
    cursor: pointer
    border-bottom: 1px solid #303030
    +box-shadow(0 0 3px #303030)
  .close
    position: absolute
    right: 5px
    top: 0px
    cursor: pointer
  ul
    margin: 0px
    clear: both
    padding: 0px 5px
    li
      float: left
      width: 25px
      padding: 2px
      color: #333
      font-weight: bold
      cursor: pointer
      list-style: none
      font-family: "lucida grande", tahoma, verdana, arial, sans-serif
      text-transform: uppercase
      position: relative
      background-color: #EBF8A4
      border: 1px solid #A2D246
      box-shadow: 0 1px 1px #FFFFFF inset
      display: block
      margin: 2px
      text-align: center
      height: 25px
      border-radius: 5px
      &:hover
        +box-shadow(0 0 3px rgba(0,0,0,.75))
      .amounts
        position: absolute
        top: 0px
        right: 5px
        font-size: 8px
        color: red
.page-wordgame
  h1.title
    text-align: center
.page-wordgame-level
  h1.title
    display: none
#wordgame-header
  width: 100%
  background-color: #FFE57E
  border-bottom: 1px solid #E2B709
  height: 31px
  position: relative
  z-index: 100
  font: 18px 'bebas-neue',Helvetica,Arial,sans-serif
  &:after
    border-bottom: 1px solid #DAE4ED
    content: "-"
    display: block
    height: 32px
    position: absolute
    text-indent: -9999px
    top: 0
    width: 100%
    z-index: -1
  .wordgame-text
    float: left
    line-height: 30px
    margin-left: 20px
  .center
    text-align: center
    display: block
  .item-list
    float: right
    margin-right: 20px
    ul.wordgame-menu
      margin: 0 auto
      text-align: center
      li
        color: #333
        cursor: pointer
        display: inline-block
        text-align: center
        +text-shadow(0 1px 1px #4F677F)
        padding: 0px 10px
        margin: 0px
        line-height: 30px
        a
          color: inherit
          text-decoration: none
        &:hover
          color: #FFF
          margin: auto
          position: relative
          +text-shadow(0 1px 1px #4F677F)
#wordgame-content
  margin: 15px
  #user-login
    width: 300px 
  .gamelevel, #user-login
    border: 1px solid #cccccc
    border-radius: 5px
    margin: 10px auto
    padding: 10px
    .form-text
      width: 100%
    .form-submit
      background: none repeat scroll 0 0 #FFE57E
      border: 1px solid #E2B709
      border-radius: 5px
      font-weight: bold
      padding: 3px 10px
      &:hover
        +box-shadow(0 0 3px red)
    .form-actions
      text-align: center
      